<template>
    <div class="login">
        <Navbar></Navbar>
        <div class="loginForm flex-box">
            <div class="form">
                <img src="../../assets/logo.png" class="logo" alt="">
                <h1>账号登录</h1>
                <el-form :model="loginForm" status-icon ref="ruleForm">
                    <el-form-item label="" prop="pass">
                        <el-input v-model="loginForm.username" autocomplete="off" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="checkPass">
                        <el-input type="password" v-model="loginForm.password" autocomplete="off" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <div class="mb-20 clearfix">
                        <span class="pull-left point tip">免费注册</span>
                        <span class="pull-right point tip">忘记密码</span>
                    </div>
                    <el-form-item>
                        <el-button class="loginBtn" @click="login">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>

<script lang="ts">
    import Navbar from '../../layout/components/Navbar.vue'
    import Footer from '../../layout/components/Footer.vue'
    import { defineComponent, reactive, toRefs } from 'vue'
    export default defineComponent({
        name: "login",
        components:{
            Navbar,
            Footer
        },
        setup() {
            const loginForm = reactive({
                loginForm: {
                    username: '',
                    password: ''
                }
            })
            const login = () => {
                console.log(loginForm.loginForm)
            }
            return {
                ...toRefs(loginForm),
                login
            }
        }
    })
</script>

<style scoped lang="scss">
.login{
    height: 100%;
    width: 100%;
    .loginForm{
        height: calc(100% - 240px);
        background: url("../../assets/bg.jpg") no-repeat;
        background-size: 100% 100%;
    }
    .form{
        width: 420px;
        min-height: 300px;
        padding: 20px 40px;
        background: rgba(255, 255, 255, 0.5);
        border: 1px solid #ebebeb;
        border-radius: 10px;
        transition: .2s;
        font-size: 14px;
        &:hover{
            box-shadow: 0 0 8px 0 rgb(232 237 250 / 60%), 0 2px 4px 0 rgb(232 237 250 / 50%);
        }
        .logo{
            width: 60px;
            height: 60px;
            display: block;
            margin: 0 auto;
            margin-bottom: 20px;
        }
        h1{
            font-size: 20px;
        }
        .loginBtn{
            width: 100%;
        }
        .tip{
            &:hover{
                color: #006EAB;
            }
        }
    }
}
</style>
